<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.tab ul {
				overflow:hidden;
				padding: 0;
				margin: 0;
			}
			.tab ul li {
				box-sizing:border-box;
				padding: 0;
				float: left;
				width: 100px;
				height: 45px;
				line-height: 45px;
				list-style: none;
				border-top: 1px solid blue;
				border-right: 1px solid blue;
				cursor: pointer;			
			}
			.tab ul li:first-child{
				border-left:1px solid blue;				 
			}
			.tab ul li.active{
				background-color: orange;
			}
			.tab div {
				width: 500px;
				height: 300px;
				display: none;
				text-align: center;
				font-size: 30px;
				line-height: 300px;
				border: 1px solid blue;
				border-top: 0px;
			}
			.tab div.current{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="tab">
				<ul>			
					<li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
				</ul>			
				<div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item,index) in list'>
					<img :src="item.path">
				</div>				
			</div>			
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm= new Vue({
				el:'#app',
				data:{
					currentIndex:0, //选项卡当前索引
					list:[{
						id:1,
						title:'apple',
						path:'img/1.jpeg'
					},{
						id:2,
						title:'orange',
						path:'img/2.jpeg'
					},{
						id:3,
						title:'lemon',
						path:'img/3.jpeg'
					}]
				},
				methods:{
					change:function(index){
						//这里实现选项卡切换，本质通过操作类名
						//如何操作类名，通过currentIndex
						this.currentIndex = index;
					}
				}
			});		
			
		</script>
		
	</body>
</html>
